@import "/src/assets/variables";

.panel {
  height: 100%;
  color: @fontColor !important;
}

.horizontalSplit {
  display: flex;
  flex-direction: row;
  height: 100%;
}

.horizontalSplitGutter {
  height: 100%;
  width: 16px !important;
  margin: 0 -12px 0 -4px;
  background: none;
  opacity: 0;
  box-sizing: border-box;
  border: none;
  cursor: ew-resize !important;
  z-index: 999;
}

//noinspection DuplicatedCode
.icon {
  height: @toolHeight;
  margin: 1px;
  padding: 4px 4px;
  border-radius: 2px;
  font-size: 16px;
  color: @iconColor;
  user-select: none;

  &:hover {
    background-color: @toolItemIconHoverBgColor;
  }

  &:active {
    background-color: @toolItemIconActiveBgColor;
  }

  svg, svg g, svg g path, svg g rect, svg path {
    fill: @iconColor;
  }
}

.iconDisable {
  color: @fontDisableColor !important;
  cursor: default !important;

  &:hover {
    background-color: unset !important;
  }

  svg, svg g, svg g path, svg g rect, svg rect, svg path {
    fill: @fontDisableColor !important;
  }
}

.iconActive {
  background-color: @toolItemIconActiveBgColor;
}

.leftPanel {
  box-sizing: border-box;
  border-right: 1px solid @borderColor;
  height: 100%;
}

.centerPanel {
  box-sizing: border-box;
  height: 100%;
}

.rightPanel {
  box-sizing: border-box;
  border-left: 1px solid @borderColor;
  height: 100%;
}

.requestTitle {
  height: 30px;
  padding: 1px 12px 5px 12px;
  line-height: 30px;
  font-size: 14px;

  :global {
    .bp3-button {
      height: 24px;
      position: relative;
      bottom: 1px;
      margin-left: 6px;
    }
  }
}

.requestTitleText {
  cursor: default;
  padding-right: 18px;

  &:hover .editIcon {
    display: unset;
  }
}

.editIcon {
  display: none;
  position: relative;
  margin-left: 6px;
  top: 2px;

  &:hover {
    cursor: pointer;
    display: unset;

    svg, svg path {
      fill: @fontActiveColor;
    }
  }
}

.requestTitleInput {
  input.bp3-input {
    font-size: 14px !important;
  }
}

.requestTitleBut {
  :global(.bp3-button) {
    height: 20px !important;
    width: 20px !important;
    margin: 0 !important;
    top: 0 !important;
    right: 2px !important;
    background-color: #3C3F41 !important;

    &:hover {
      background-color: @toolItemIconHoverBgColor !important;
    }

    &:active {
      background-color: @toolItemIconActiveBgColor !important;
    }
  }
}

.requestTitleTextNeedUpdate {
  color: @fileModifyColor;
}

.requestPath {
  height: 30px;
  padding: 2px 12px;
  align-items: center;

  select {
    position: relative;
    bottom: 1px;
    flex-shrink: 0;
    flex-grow: 0;
    width: 80px;
    height: 24px;
    background-color: #3C3F41;
    border-color: #646464;
    color: @fontColor;

    &:focus {
      box-shadow: 0 0 0 1px #4083c9, 0 0 0 1px #4083c9, 0 0 0 1px rgb(64 131 201 / 30%), inset 0 0 0 1px rgb(64 131 201 / 30%), inset 0 1px 1px rgb(64 131 201 / 40%);
    }
  }

  :global {
    .bp3-button {
      height: 24px;
      position: relative;
      bottom: 1px;
      margin-left: 6px;
    }
  }
}

.requestArgs {
  //height: calc(100% - 60px);
  height: calc(100% - 60px - @toolHeight);

  :global {
    .bp3-tab-list {
      height: 30px !important;
    }

    .bp3-tab-panel {
      height: calc(100% - 30px) !important;
      //height: calc(100% - 30px - @toolHeight);
    }
  }
}

.requestBodyRadio {
  height: 32px;
  line-height: 24px;
  box-sizing: border-box;
  padding: 4px 0 4px 16px;
  user-select: none;
}

.requestEditor {
  height: calc(100% - 32px + @toolHeight) !important;
  //height: calc(100% - 32px) !important;
}

.responseData {
  //height: 100%;
  height: calc(100% - @toolHeight);

  :global {
    .bp3-tab-list {
      height: 30px !important;
    }

    .bp3-tab-panel {
      height: calc(100% - 30px) !important;
      //height: calc(100% - 30px - @toolHeight);
    }
  }
}

.httpStatus {
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.httpStatusItem {
  margin-right: 16px;
}

.httpStatusValue {
  color: #68D696;
}

:global(.bp3-tab-panel).serverLogs {
  :global {
    .simplebar-content-wrapper {
      background-color: #2B2B2B;
    }
  }
}

.leftPanelTools {
  height: 28px;
  padding: 0 4px;
  box-sizing: border-box;
  color: @fontColor;
  //background-color: @splitBgColor;
  border-bottom: 1px solid @borderColor;
  align-items: center;
}

.leftPanelList {
  //height: calc(100% - 28px);
  height: calc(100% - 28px - @toolHeight);
}

.leftPanelListItem {
  box-sizing: border-box;
  height: 22px;
  user-select: none;
  padding-right: 4px;

  &:hover {
    background-color: #0D293E;
  }
}

.leftPanelListItemSelected {
  background-color: #4B6EAF;

  &:hover {
    background-color: #4B6EAF;
  }
}

.leftPanelListItemIcon {
  padding: 3px 4px 3px 8px;
}

.leftPanelListItemText {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 22px;
}

.loading {
  min-height: 64px;
  max-height: 256px;
}

.dialog {
  font-size: 12px;

  :global {
    .bp3-form-group.bp3-inline {
      margin-left: 16px;
      margin-right: 16px;

      .bp3-form-content {
        flex-grow: 1;
        flex-shrink: 1;
      }
    }
  }
}
